<template>
	<div class="hello">
   		<section>
   			<div class="myself_list">
				<img src="../../build/logo.png" width="53" height="53"/>
				<router-link to="login" tag="span">
						点击登录
				</router-link>
			</div>
			<ul class="myself_nav">
				<router-link tag="li" to="localmusic"><img src="../../build/logo.png" width="73" height="50">
					<p>本地音乐</p>
				</router-link>
				<router-link tag="li" to="download"><img src="../../build/logo.png" width="73" height="50">
					<p>我的下载</p>
				</router-link>
				<router-link tag="li" to="recently"><img src="../../build/logo.png" width="73" height="50">
					<p>最近播放</p>
				</router-link>
			</ul>
			<ul class="myself_nav" style="margin-top: 20px;">
				<router-link tag="li" to="shoucang"><img src="../../build/logo.png" width="73" height="50">
					<p>我的收藏</p>
				</router-link>
				<router-link tag="li" to="news"><img src="../../build/logo.png" width="73" height="50">
					<p>我的消息</p>
				</router-link>
				<router-link tag="li" to="setting"><img src="../../build/logo.png" width="73" height="50">
					<p>设置</p>
				</router-link>
			</ul>
			
			<div class="">
				<van-collapse v-model="activeNames">
				  <van-collapse-item title="创建的歌单" name="1">
				    	<div class="singer_list">
							<ul>
								<router-link to="#" tag="li">
									<img src="../../build/logo.png" width="53" height="53"/>
									<span>
										<p>优秀的我</p>
										<p style="color: #A8A8A8;font-size:12px;">54首</p>
										<em>&gt;</em>
									</span>
								</router-link>
							</ul>
						</div>
				  </van-collapse-item>
				  <van-collapse-item title="有赞零售" name="2">
				    2
				  </van-collapse-item>
				  <van-collapse-item title="有赞美业" name="3">
				    3
				  </van-collapse-item>
				</van-collapse>
			</div>
   		</section>
   		
   		
	</div>
</template>

<script>
	import { Row, Col,Tabbar, TabbarItem,Collapse, CollapseItem,Cell} from 'vant';
	export default {
		name: 'Myself',
		components:{
         [Row.name]:Row,
         [Col.name]:Col,
         [Tabbar.name]:Tabbar,
         [TabbarItem.name]:TabbarItem,
         [Collapse.name]:Collapse,
         [CollapseItem.name]:CollapseItem,
         [Cell.name]:Cell
      },
		data() {
			return {
				src: '',
				active:3,
				activeNames: ['1']
			}
	  },
	  methods:{
	  	back(){
	  		this.$router.go(-1);
	  	}
	  }
	}
</script>

<style>
	.myself_list{
		line-height: 53px;
	}
	.myself_list img{
		border-radius: 50%;
		margin: 10px 0 0 10px;
	}
	.myself_nav{
		display: flex;
		justify-content: space-around;
	}
	.singer_list ul li{
	display: flex;
	position: relative;
	margin: 12px 0;
}
.singer_list ul li>img{
	border-radius: 50%;
	margin-right: 11px;
}
.singer_list li>span>p{
	margin: 5px 0;
	font-size: 14px;
}
.singer_list li>span>em{
	position: absolute;
	right: 5px;
	top: 0;
	font-size: 30px;
	font-style: normal;
	color: #a8a8a8;
}
</style>